<html>

<head>

    <meta name="layout" content="main">

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>    

    <style>

        .test {

            width: 200px;

            height: 200px;

            line-height:200px;

            background-color: #abc;

            float:left;

            text-align:center;

        }



        .example1 {

            margin-top:90px;

            margin-left:5px;

            margin-right:5px;

            float:left;        

        }

    </style>

</head>

<body>    

    <div id="test" class="test">

        测试html5页面截图        

    </div>

    

    <input class="example1" type="button" value="生成">



    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

    <script type="text/javascript" src="http://html2canvas.hertzen.com/build/html2canvas.js"></script>

    <script type="text/javascript">

        $(document).ready(function () {

            $(".example1").on("click", function (event) {

                event.preventDefault();

                html2canvas(document.getElementById("test"), {

                    allowTaint: true,

                    taintTest: false,

                    onrendered: function (canvas) {

                        canvas.id = "mycanvas";

                        //document.body.appendChild(canvas);

                        //生成base64图片数据

                        var dataUrl = canvas.toDataURL();

                        var newImg = document.createElement("img");

                        newImg.src = dataUrl;

                        document.body.appendChild(newImg);

                    }

                });

            });



        });



    </script>

</body>

</html>